
import { MinusCircleOutlined, PlayCircleOutlined, TwitterOutlined } from '@ant-design/icons';
import { Handle, Position } from '@xyflow/react';
import { Tag } from 'antd';
import { memo } from 'react';


const handleStyle =
{
    width: "8px",
    height: "8px",
    backgroundColor: "transparent", // 透明背景（空心）
    border: "2px solid #7dd3fc", // 浅蓝色边框
    borderRadius: "50%", // 圆形
};

const handleRejectStyle =
{
    ...handleStyle,
    border: "2px solid #f96b64", // 浅蓝色边框
};

export const StartNode = memo((props: any) => {
    let data = props.data || {};
    let id = props.id;
    //let isShowReject = data.isShowReject || true;

    return (
        <>
            {/*   {isShowReject ? <Handle
                type="target"
                id={`${id}_target_top`}
                position={Position.Top}
                isConnectable={false}
                style={{ ...handleRejectStyle }}
            /> : null}

            {isShowReject ? <Handle
                type="source"
                id={`${id}_source_top`}
                position={Position.Top}
                isConnectable={false}
                style={{ ...handleRejectStyle }}
            /> : null} */}

            <Handle
                type="source"
                id={`${id}_source_right`}
                position={Position.Right}
                style={handleStyle}
            />

            <Tag style={{ fontSize: '16px', padding: '8px 12px', margin: "5px" }} icon={<PlayCircleOutlined />} color="#55acee">
                {data.label}
            </Tag>

        </>
    );
});

export const EndNode = memo((props: any) => {
    let data = props.data || {};
    let id = props.id;
    return (
        <>
            <Handle
                type="target"
                id={`${id}_target_left`}
                position={Position.Left}
                style={handleStyle}
            />

            <Tag style={{ fontSize: '16px', padding: '8px 12px', margin: "5px" }} icon={<MinusCircleOutlined />} color="#55acee">
                {data.label}
            </Tag>
        </>
    );
});


export const GeneralNode = memo((props: any) => {
    let data = props.data || {};
    let id = props.id;
    let isShowReject = data.isShowReject || true;
    return (
        <>

            {isShowReject ? <Handle
                type="target"
                id={`${id}_target_top`}
                position={Position.Top}
                isConnectable={false}
                style={{ ...handleRejectStyle }}
            /> : null}

            {isShowReject ? <Handle
                type="source"
                id={`${id}_source_top`}
                position={Position.Top}
                isConnectable={false}
                style={{ ...handleRejectStyle }}
            /> : null}

            <Handle
                type="source"
                id={`${id}_source_right`}
                position={Position.Right}
                style={handleStyle}
            />

            <Tag style={{ fontSize: '16px', padding: '8px 12px', margin: "5px" }} color="#55acee">
                {data.label}
            </Tag>

            <Handle
                type="target"
                id={`${id}_target_left`}
                position={Position.Left}
                style={handleStyle}
            />
        </>
    );
});


